<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: device-css"/>
</head>
<body>
<div class="wrapper">

    <div class="row chart-title"></div>
    <div class="row">
        <div class="col-sm-4">
            <canvas id="chart1"></canvas>
        </div>
        <div class="col-sm-4">
            <canvas id="chart2"></canvas>
        </div>
        <div class="col-sm-4">
            <canvas id="chart3"></canvas>
        </div>
    </div>
    <div class="row search-row" id="toolbar">
        <div class="col-sm-12">
            <form id="formId">
                <button type="button" class="btn btn-primary btn-rounded btn-sm"
                        id="view-btn" onclick="scrollToTable()">
                    <i class="fa fa-list"></i>
                </button>
                <input type="text" class="date-input" placeholder="日期" id="date"
                       style="width: 180px; text-align: center; padding-left: 0"
                       name="date" autocomplete="off">
                <input type="hidden" id="beginTime" name="params[beginTime]">
                <input type="hidden" id="endTime" name="params[endTime]">
                <input type="hidden" th:value="${boat.code}" name="boatCode">
                <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="search()">
                    <i class="fa fa-search"></i>
                </button>
                <button type="button" class="btn btn-warning btn-rounded btn-sm" onclick="resetInput()">
                    <i class="fa fa-refresh"></i>
                </button>
                <button type="button" class="btn btn-success btn-rounded btn-sm" id="download-btn"
                        onclick="openDownloadDialog()">
                    <i class="fa fa-cloud-download"></i>
                </button>
            </form>
        </div>
    </div>
    <div class="col-sm-12" id="table-row">
        <table id="bootstrap-table"></table>
    </div>
</div>

<th:block th:include="include :: device-js"/>
<script th:inline="javascript">
    var msgType = 'ctdData';
    var boatCode = [[${boat.code}]];
    let downloadUrl = '/boat/ctdData/export';

    function msgGot(object) {
        if (object.type !== msgType || object.data.boatCode !== boatCode) return;

        let data = object.data;
        let label = data.time;
    }

    let y = []
    let tempArr = [];
    let salinityArr = [];
    let pressureArr = [];

    let tempChart, salinityChart, pressureChart;
    let tempConfig, salinityConfig, pressureConfig, vsConfig;
    let chartData = {
        labels: [],
        datasets: [{
            label: '',
            data: [],
        }]
    };
    const chartConfig = {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            scales: {
                x: {
                    type: 'linear',
                    grid: {
                        display: false,
                    },
                    ticks: {
                        stepSize: 10,
                    },
                    title: {
                        display: false,
                        text: ''
                    }
                },
                y: {
                    grid: {
                        color: 'rgba(255,255,255,.15)',
                        display: true,
                    },
                    ticks: {
                        stepSize: 1,
                    },
                    title: {
                        display: false,
                        text: '距离 km'
                    },
                }
            },
            plugins: {
                legend: {
                    display: false,
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function (tooptipItem) {
                            return tooptipItem.yLabel + '个';
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'title'
                }
            }
        },
    };

    var prefix = "/boat/ctdData";
    var options = {
        url: prefix + "/list",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        modalName: "CTD",
        showSearch: false,
        showRefresh: false,
        showColumns: false,
        showToggle: false,
        // toolbar: 'toolbar',
        singleSelect: true,
        // fixedColumns: true,
        // fixedNumber: 1,
        sortName: 'id',
        sortOrder: 'desc',
        sidePagination: 'server',
        onLoadSuccess: function (data) {
            dataList = data.rows;
            if ($.common.isEmpty(dataList)) dataList = [];
            if (dataList.length === 0) {
                $.modal.msg(currentDate + ' 无数据')
            }
            try {
                prepareData(); // 这里 把通用的clearData 和 initChart全部放进这里
            } catch (e) {
                console.log(e)
            }
        },
        onClickCell: function (field, value, row, $element) {
            showChart(row)
        },
        columns: [
            {
                checkbox: true
            },
            {
                field: 'time',
                title: '数据时间'
            },
            {
                field: 'count',
                title: '数量'
            },

        ]
    };
    $.table.init(options);

    function showChart(data) {
        if (data) {
            $('.chart-title').html(data.time)
            y = []
            for (let i = 0; i < data.count; i++) {
                y.push(i);
            }

            tempArr = JSON.parse('[' + data.tempList + ']')
            salinityArr = JSON.parse('[' + data.salinityList + ']')
            pressureArr = JSON.parse('[' + data.pressureList + ']')
        }
        if (tempChart) {
            tempConfig.data.labels = y;
            tempConfig.data.datasets[0].data = tempArr
            tempChart.update();
        } else {
            tempConfig = JSON.parse(JSON.stringify(chartConfig))
            tempConfig.options.plugins.title.text = '温度';
            tempConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '温度: ' + tooltipItem.formattedValue + '℃ ' + tooltipItem.label;
            }
            tempConfig.options.scales.y.min = 0;
            tempConfig.options.scales.y.max = 40;
            tempConfig.options.scales.y.ticks.stepSize = 5;
            tempConfig.data = {
                labels: y,
                datasets: [{
                    tension: 0.2,
                    label: '温度',
                    data: tempArr,
                    borderColor: BORDER_COLORS[0],
                    backgroundColor: BACKGROUND_COLORS[0]
                }]
            };
            tempChart = new Chart(document.getElementById('chart1'), tempConfig);
        }

        if (salinityChart) {
            salinityConfig.data.labels = y;
            salinityConfig.data.datasets[0].data = salinityArr
            salinityChart.update();
        } else {
            salinityConfig = JSON.parse(JSON.stringify(chartConfig))
            salinityConfig.options.plugins.title.text = '盐度';
            salinityConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '盐度: ' + tooltipItem.formattedValue + '‰ ' + tooltipItem.label;
            }
            salinityConfig.options.scales.y.min = 0;
            salinityConfig.options.scales.y.max = 40;
            salinityConfig.options.scales.y.ticks.stepSize = 5;
            salinityConfig.data = {
                labels: y,
                datasets: [{
                    tension: 0.2,
                    label: '盐度',
                    data: salinityArr,
                    borderColor: BORDER_COLORS[1],
                    backgroundColor: BACKGROUND_COLORS[1]
                }]
            };
            salinityChart = new Chart(document.getElementById('chart2'), salinityConfig);
        }

        if (pressureChart) {
            pressureConfig.data.labels = y;
            pressureConfig.data.datasets[0].data = pressureArr;
            pressureChart.update();
        } else {
            pressureConfig = JSON.parse(JSON.stringify(chartConfig))
            pressureConfig.options.plugins.title.text = '压力';
            pressureConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '压力: ' + tooltipItem.formattedValue + 'kPa ' + tooltipItem.label;
            }
            pressureConfig.options.scales.y.min = 0;
            pressureConfig.options.scales.y.max = 1200;
            pressureConfig.options.scales.y.ticks.stepSize = 200;
            pressureConfig.data = {
                labels: y,
                datasets: [{
                    tension: 0.2,
                    label: '压力',
                    data: pressureArr,
                    borderColor: BORDER_COLORS[3],
                    backgroundColor: BACKGROUND_COLORS[3]
                }]
            };
            pressureChart = new Chart(document.getElementById('chart3'), pressureConfig);
        }


    }

    function prepareData() {
        y = []
        tempArr = [];
        salinityArr = [];
        pressureArr = [];

        // if (dataList.length === 0) return;
        showChart(dataList[0])
    }

    function windowResizeCallback() {
    }
</script>

</body>
</html>